import React from 'react';
import {inject, observer} from 'mobx-react';
import { Browser } from 'weaver-mobile-page'
import { withRouter } from 'react-router-dom';
import { Tools ,SearchBar,Icon, NavBar, Picker, WhiteSpace, List, DatePicker} from 'weaver-mobile';
const getLabel = Tools.getLabel;
class GoalLevelTag extends React.Component {

    constructor(props){
        super(props);
        this.state={
            tagList:[
            ],
            currentTag:{
                id:"",
                name:""
            }
        }
    }

    
    componentWillMount(){

    }

    componentWillReceiveProps(newProps){
    
        if(this.props.locationKey != newProps.locationKey){
            let {dataList} = newProps;
            // console.log(dataList)
            let _dataList = dataList.slice(0,dataList.length-1)
            this.setState({tagList:_dataList})
        }
    }

    componentDidMount(){

    }


    onClickTag = (id)=>{
        // console.log(id);
        let {tagList} = this.state;
        let key = 0;
        for(let i = 0;i < tagList.length;i ++){
            if(tagList[i].id == id){
                key = i;
            }
        }
        tagList = tagList.slice(0,key+1);
        this.setState({tagList});
        if(typeof this.props.onCallBackSuccess === "function"){
            this.props.onCallBackSuccess(id,tagList);
       }
        
    }

    getTagList = ()=>{
        let {tagList} = this.state;
        // console.log("tagList"+tagList)
        if(tagList.length > 2){
            tagList = tagList.slice(-2,tagList.length);
            return tagList && tagList.length>0 && tagList.map((item,idx)=>{
                return <div key={idx} style={{display:"inline"}}>
                    <p  onClick={(value)=>this.onClickTag(item.id)}>{idx == 0?<Icon type="ellipsis" color="#4D7AD8" />:item.name}</p>
                    <Icon type="right" color="#aaaaaa" />
                </div>
             })
        }else{
            return tagList && tagList.length>0 && tagList.map((item,idx)=>{
                return  <div key={idx} style={{display:"inline"}}>
                      <p  onClick={(value)=>this.onClickTag(item.id)}>{item.name}</p>
                     <Icon type="right" color="#aaaaaa" />
                 </div>
             })
        }
        
    }


    render(){
        let {tagList} = this.state;
        return (
            <div className="workrelate_mobile_goal_tag">
                {this.getTagList()}
            </div>
        )
    }
}

export default GoalLevelTag; 
